In this Advance CSS tutorial, we will be learning how to style the HTML <button> element.
HTML Buttons
In HTML, we have a dedicated <button> element to create buttons on a web page. A button is generally used to represent a clickable event, it is often used with the <form> element to submit button. Here in this article, we have provided many HTML and CSS snippets to create different buttons.
Basic Buttons
It's very easy to style a basic button.
<!DOCTYPE html>
<html>
<head>
<style>
#button {
background-color: lightblue;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'>Button </button>
</body>
</html>
Button Color
To set a button color, we can use the
background-color
property because the
color
property will change the button text's color.
Example
Create a red color button
<!DOCTYPE html>
<html>
<head>
<style>
#button {
background-color: red;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'>Button </button>
</body>
</html>
Button Size
The size of the button can be changed using the
font-size.
Because the button size alters with the size of its text.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
background-color: red;
color: black;
padding: 15px 32px;
text-align: center;
font-size: 24px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'> Big Button </button>
</body>
</html>
Round or Circle button
By manipulating the
border-radius
property of a
button
we can create a circular button. Set the
border-radius
property to
50%,
it will create a circular or rounded button.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
background-color: red;
color: black;
padding: 15px 15px;
text-align: center;
font-size: 12px;
border-radius: 50%;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'> Circular Button </button>
</body>
</html>
Colored Borders Button
Using the
border
property, we can define a button with a color border.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
background-color: red;
padding: 15px 32px;
background-color: white;
color: black;
border: 2px solid red;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'> Red Button </button>
</body>
</html>
Hoverable Color changing button
To create a hoverable color changing button, we can use the
:hover
pseudo-class and
transition
property. The
:hover
pseudo-class invoke a different styling for the button when the user hovers over it and the
transition
property makes the changing styling smooth.
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
padding: 15px 32px;
background-color: white;
color: black;
border: 2px solid red;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 1s;
}
#button:hover{
background-color: red;
color: white;
}
</style>
</head>
<body>
<button id ='button'> Red Button </button>
</body>
</html>
Button Shadow
A shadow on a button gives it a 3D look, and using the
box-shadow
property, we can create a shadow for a box.
Example
Create a shadow when the user hovers over the button.
<!DOCTYPE html>
<html>
<head>
<style>
#button {
padding: 15px 32px;
color: black;
border: 2px solid red;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
transition-duration: 1s;
}
#button:hover{
background-color: red;
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<button id ='button'> Red Button </button>
</body>
</html>
Create a Disabled button
To create a disable button set decreases the button opacity and set the cursor property to not-allowed
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
padding: 15px 32px;
color: white;
background-color: red;
border: 2px solid red;
font-size: 15px;
margin: 4px 2px;
opacity: 0.3;
cursor: not-allowed;
}
</style>
</head>
<body>
<button id ='button'> Disabled Button </button>
</body>
</html>
Set the button width
The width of the button can be changed using
width
property
Example
<!DOCTYPE html>
<html>
<head>
<style>
#button {
padding: 15px 32px;
width: 100%;
color: white;
background-color: red;
border: 2px solid red;
font-size: 15px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button id ='button'> Full length Button </button>
</body>
</html>
Group Buttons horizontally
To group button together in a single line set the
display:inline-block
,
float:left
and there should be no margin.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.buttons button{
padding: 15px 32px;
color: white;
background-color: red;
border: 2px solid lightblue;
display: inline-block;
font-size: 15px;
cursor: pointer;
float: left;
}
</style>
</head>
<body>
<div class="buttons">
<button > Button1 </button>
<button > Button2 </button>
<button > Button3 </button>
<button > Button4 </button>
</div>
</body>
</html>
Group Button vertically
To group button vertically, set the
display:block.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.buttons button{
padding: 15px 32px;
color: white;
background-color: red;
border: 2px solid lightblue;
display: block;
font-size: 15px;
cursor: pointer;
}
.buttons button:hover{
background-color: lightblue;
border-color: red;
}
</style>
</head>
<body>
<div class="buttons">
<button > Button1 </button>
<button > Button2 </button>
<button > Button3 </button>
<button > Button4 </button>
</div>
</body>
</html>
Summary
-
The
background-colorproperty set the color of the button -
The
colorproperty sets the text color of the button. -
The
font-sizeincreases the size of button text and, ultimately the button itself. -
The
widthproperty can increase and decrease the width of the button. -
To group buttons horizontally, set the
diplay:inline-block. -
To group, the buttons vertically ser the
display:block.